<script setup>
import titleLen4 from '@/assets/image/common/bg-title-4.png'
import titleLen5 from '@/assets/image/common/bg-title-5.png'
import titleLen6 from '@/assets/image/common/bg-title-6.png'
import titleLen8 from '@/assets/image/common/bg-title-8.png'
import titleLen10 from '@/assets/image/common/bg-title-10.png'
import titleLenMax from '@/assets/image/common/bg-title-max.png'
import titleLenMax2 from '@/assets/image/common/bg-title-max2.png'

defineProps({
  title: {
    type: String,
    default: '',
  },
  titleLength: {
    type: String,
    default: '4',
  },
  stretch: {
    type: Boolean,
    default: false,
  },
  actions: {
    type: Array,
    default: () => [],
  },
  activeAction: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['tabChange'])

const titleMap = {
  4: titleLen4,
  5: titleLen5,
  6: titleLen6,
  8: titleLen8,
  10: titleLen10,
  n: titleLenMax,
  n2: titleLenMax2,
}
</script>

<template>
  <section class="ui-panel" :class="stretch && 'stretch'">
    <div class="ui-panel__title">
      <img
        class="ui-panel__title--bg"
        height="32"
        :src="titleMap[titleLength]"
      >
      <span>{{ title }}</span>
      <div v-if="actions?.length" class="actions">
        <div v-for="item in actions" :key="item.key" class="actions__btn" :class="activeAction !== item.key && 'inactive'" @click="emit('tabChange', item.key)">
          <span>{{ item.text }}</span>
        </div>
      </div>
    </div>
    <i class="stroke top" />
    <i class="stroke right" />
    <i class="stroke bottom" />
    <i class="stroke left" />
    <img
      class="ui-panel__corner"
      height="6"
      src="@/assets/image/common/panel-corner.png"
    >
    <img
      class="ui-panel__trinket"
      height="6"
      src="@/assets/image/common/panel-trinket.png"
    >
    <div class="ui-panel__content">
      <slot />
    </div>
  </section>
</template>

<style lang='scss' scoped>
.ui-panel {
  position: relative;
  width: 100%;
  min-height: 100px;
  background: linear-gradient(0deg,#73a3cc20 0%, #020E3000 100%);

  &.stretch {
    height: 100%;

    .ui-panel__content {
      height: calc(100% - 32px);
      padding: 0 16px;
    }
  }

  .stroke {
    position: absolute;
    overflow: hidden;
    border-radius: 2px;

    &.top {
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(240deg, #009DE3 0%, #009DE300 60%);
    }

    &.right {
      top: 0;
      right: 0;
      width: 2.5px;
      height: 100%;
      background: linear-gradient(120deg, #009DE3 0%, #009DE300 70%);
    }

    &.bottom {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.5px;
      background: linear-gradient(60deg, #EFC631 0%, #009DE34D 60%, #009DE300 72%);
    }

    &.left {
      top: 0;
      left: 0;
      width: 2.5px;
      height: 100%;
      background: linear-gradient(60deg, #EFC631 0%, #73A3CC 35%, #73A3CC00 50%);
    }
  }

  &__title {
    position: relative;
    display: flex;
    align-items: center;
    font-family: $font-sub;

    &>span {
      position: absolute;
      left: 56px;
      font-size: 20px;
    }

    &--bg {
      transform: translateX(-5px);
    }

    .actions {
      position: absolute;
      top: 0;
      right: 20px;
      display: flex;
      align-items: center;
      height: 100%;

      &__btn {
        position: relative;
        padding: 0 23px;
        font-family: auto;
        font-size: 12px;
        color: #FFF;
        cursor: pointer;

        &.inactive {
          color: #999;
        }

        &+.actions__btn{
          margin-left: 10px;
        }

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          width: 100%;
          height: 100%;
          content: '';
          background-color: #009DE3;
          opacity: 0.4;
          transform: skew(49deg);
        }
      }
    }
  }

  &__corner {
    position: absolute;
    bottom: 6px;
    left: 6px;
  }

  &__trinket {
    position: absolute;
    right: 1px;
    bottom: -6px;
  }

  &__content {
    padding: 16px 20px;
  }
}
</style>
